<template>
  <div class="container">
   <div class="reset-password">
     <h2  align="center">重设密码</h2>
     
      <div class="input-container1">
        <i class="icon"></i>
        <input type="email" v-model="email" placeholder="请输入邮箱" class="input-text">
      </div>
      
      <div class="input-container2">
        <i class="icon"></i>
        <input type="text" v-model="password" placeholder="请输入新密码" class="input-text">
      </div>
      
      <div class="input-container2">
        <i class="icon"></i>
        <input type="text" v-model="repassword" placeholder="请再次确认新密码" class="input-text">
      </div>

     <div class="input">
       <div class="checkbox-container">
       <input
         type="captcha"
         v-model="captcha"
         placeholder="    请输入验证码"
         class="input-textx"
         />
       <button class="yanzhengma-button" @click="getcaptcha">发送验证码</button>
       </div>
     </div>

     <div class="input">
       <button class="tijiao-button" @click="submit">提交</button>

     </div>

   </div>
  </div>
</template>

<script>
import { getcaptcha, register, resetpassword } from '@/api/user.js'; // 确保路径正确
export default {
  name: 'LoginForm',
  data() {
    return {
       email:'',
      password:'',
      repassword:'',
      captcha:''
    };
  },
  methods: {
    async getcaptcha() {
      try {
        const response = await getcaptcha(this.email);
        console.log('发送成功:', response.status_code);
      } catch (error) {
        console.error('发送失败:', error.message);
      }
    },
    async submit() {
      const data = {
        username: this.username,
        password: this.password,
        email:this.email,
        captcha:this.captcha
      };
      try {
        const response = await register(data);
        console.log('注册成功:', response.status_code);
      } catch (error) {
        console.error('注册失败:', error.message);
      }
    }
  }
};
</script>

<style scoped>
.container {
  background-image: url(../../assets/user/userbackground.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}
.reset-password {
  height: 700px;
}
.reset-password h2{
  font-family:inter;
  font-size: 30px;
  color: #ffffff;
  margin-top:140px;
}

.input-container1 {
  display: flex;
  align-items: center;
  border: 0.3vh solid #ccc;
  padding: 5px 10px;
  border-radius: 20px;
  width: 21vw;  /* 根据需要调整宽度 */
  /* margin: 0 auto; */
  margin-left:38vw;
  margin-top:2vh;
  background-color: rgba(210, 210, 210, 0.6);
}

.input-container1 .icon {
  display: inline-block;
  width: 2vw;  /* 根据图像的大小调整 */
  height: 3.5vh;  /* 根据图像的大小调整 */
  background-image: url('../../assets/user/email.png');
  background-position: center;
  background-size: cover;  /* 确保图片完全覆盖整个区域 */
  background-repeat: no-repeat;
  margin-right: 10px;
}

.input-container1 input[type="email"] {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 20px;
  background: none;
  height: 40px; /* 输入框的高度 */
}


.input-container2 {
  display: flex;
  align-items: center;
  border: 0.3vh solid #ccc;
  padding: 5px 10px;
  border-radius: 20px;
  width: 21vw;  /* 根据需要调整宽度 */
  /* margin: 0 auto; */
  margin-left:38vw;
  margin-top:2vh;
  background-color: rgba(210, 210, 210, 0.6);
}

.input-container2 .icon {
  display: inline-block;
  width: 2vw;  /* 根据图像的大小调整 */
  height: 3.5vh;  /* 根据图像的大小调整 */
  background-image: url('../../assets/user/password.png');
  background-position: center;
  background-size: cover;  /* 确保图片完全覆盖整个区域 */
  background-repeat: no-repeat;
  margin-right: 10px;
}

.input-container2 input[type="text"] {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 20px;
  background: none;
  height: 40px; /* 输入框的高度 */
}

.input{
  height: 53px;
  width: 21vw;
  margin-left: 38vw; 
  margin-top: 2vh;
}
.input-text{
  text-align: left;
  height: 53px;
  width:427px;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border: none;
  background-color: rgb(210, 210, 210, 0.6);
  font-size: 20px;
}
.input-text1{
  text-align: left;
  height: 53px;
  width:427px;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border: none;
  background-color: rgb(210, 210, 210, 0.6);
  font-size: 20px;
  background-image: url(../../assets/user/email.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.input-text1:focus {
  background-image: none; /* 当输入框获得焦点时隐藏背景图标 */
}
.input-textx{
  text-align: left;
  height: 53px;
  width:18vw;
  display: block;
  padding-left: 1vw;
  border-radius: 20px;
  border: none;
  background-color: rgb(210, 210, 210, 0.6);
  font-size: 20px;
}
.yanzhengma-button{
  height: 53px;
  width: 100px;
  border-radius: 20px;
  margin-left:2vw;
  background-color: rgb(210, 210, 210, 0.95);
  text-align: center;
}
.checkbox-container {
  display: flex; 
  width:22vw;
}

.tijiao-button {
  height: 53px;
  width: 427px;
  /* 其他样式，如背景色、边框、字体大小等 */
  background-color: rgb(210, 210, 210, 0.95);
  border: none; /* 去除边框 */
  color: white; /* 白色文字 */
  font-size: 20px; /* 字体大小 */
  cursor: pointer; /* 鼠标悬停时显示为手形图标，表示可点击 */
  border-radius: 20px; /* 边框圆角 */
  padding: 0 20px; /* 内边距，可以根据需要调整以控制文字与按钮边缘的距离 */
  display: block;
  margin: 0 auto;
  text-align: center; /* 文字居中显示 */
  line-height: 53px; /* 行高与按钮高度相同，确保文字垂直居中 */
}
</style>


<script setup lang="ts">
</script>
